/**
 * 学习目标：使用受控组件
 * 步骤：1. 使用state声明数据，并且把数据帮给表单元素的value属性
 * 2. 给表单元素绑定onChange事件，通过setState来修改state中的数据
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  // 1. 使用state声明数据，并且把数据绑定给表单元素的value属性
  state = {
    msg: 'hello React',
  };

  handleChange = (e) => {
    // 2. 给表单元素绑定onChange事件，通过setState来修改state中的数据
    this.setState({ msg: e.target.value });
  };

  render() {
    return (
      <div>
        {/* 注意：不要使用onInput，使用onChange去监听改变事件 */}
        <input type="text" value={this.state.msg} onChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
